<template>
	<GlobalModal :open="props.open" :show-title="false">
		<div class="content">
			<i class="iconfont confirm-info icon-alert-fill"></i>
			<p class="text">{{ props.text }}</p>
		</div>
		<template #Slot-Footer>
			<div class="footer">
				<a-button @click="cancel">取消</a-button>
				<a-button @click="emits('no-save')">不保存</a-button>
				<a-button type="primary" :loading="props.saveLoading" @click="emits('save')">保存</a-button>
			</div>
		</template>
	</GlobalModal>
</template>

<script lang="ts" setup>
interface TsProps {
	text: string;
	open: boolean;
	saveLoading: boolean;
}
const props = withDefaults(defineProps<TsProps>(), {
	text: '信息尚未保存，是否确认保存信息后再离开？',
	open: false,
	saveLoading: false
});

const emits = defineEmits<{
	(e: 'update:open', value: boolean): void;
	(e: 'no-save'): void;
	(e: 'save'): void;
	(e: 'cancel'): void;
}>();

const cancel = () => {
	emits('cancel');
	emits('update:open', false);
};
</script>

<style lang="less" scoped>
.content {
	display: flex;
	color: @text01;
	align-items: center;
	gap: 8px;

	.icon-alert-fill {
		font-size: 20px;
		color: #ff8e42;
	}

	.text {
		visibility: -1px;
		font-size: 14px;
		color: @text01;
	}
}

.footer {
	justify-content: center;
	align-items: flex-end;
	gap: 8px;
}
</style>
